"use client"
import { useState, useEffect, ReactNode } from "react"
import { useMediaQuery } from "@/app/component/_hooks/use-media-query"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { X } from "lucide-react"

interface ModalProps {
  // 可选：外部控制的打开状态
  open?: boolean
  // 可选：外部控制的打开状态变更函数
  onOpenChange?: (open: boolean) => void
  // header 标题
  header?: ReactNode
  // footer 底部
  footer?: ReactNode
  // content 
  content?: ReactNode
  // trigger 触发器
  trigger?: ReactNode
}

export function Modal({ open: externalOpen, onOpenChange: externalOnOpenChange, header, content, footer, trigger }: ModalProps) {
  // 内部状态，用于非受控模式
  const [internalOpen, setInternalOpen] = useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  // 确定使用内部状态还是外部状态
  const isControlled = externalOpen !== undefined && externalOnOpenChange !== undefined
  const open = isControlled ? externalOpen : internalOpen
  const setOpen = isControlled ? externalOnOpenChange : setInternalOpen

  // 当外部open变化时同步到内部状态（用于混合模式下的同步）
  useEffect(() => {
    if (externalOpen !== undefined && !isControlled) {
      setInternalOpen(externalOpen)
    }
  }, [externalOpen, isControlled])

  if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          {trigger}
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle className="flex justify-between items-center min-h-[40px]">
              <div>
                {header}
              </div>
              <DialogClose>
                <X />
              </DialogClose> 
            </DialogTitle>
            <DialogDescription>
              {content}
            </DialogDescription>
          </DialogHeader>
          {footer &&  <DialogFooter className="pt-2">
            {footer}
          </DialogFooter>}
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Drawer repositionInputs={true} open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        {trigger}
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader className="text-left">
          <DrawerTitle className="px-2 flex justify-between items-center min-h-[40px]">
            <div>
              {header}
            </div>
            <DrawerClose>
              <X />
            </DrawerClose>
          </DrawerTitle>
          <DrawerDescription>
            {content}
          </DrawerDescription>
        </DrawerHeader>
        {footer && <DrawerFooter className="pt-2">
          {footer}
        </DrawerFooter>}
      </DrawerContent>
    </Drawer>
  )
}
    